<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px;">
            <div style="width: 755px;" v-if="news.cover">
                <img :src="news.cover" alt="" style="overflow: hidden; width: 755px;height: 390px;">
            </div>
            <div style="margin-top: 20px;">
                <div style="text-align: center; font-size: 24px;">
                    <span>{{ news.title_en }}</span>
                </div>
                <div style="text-align: center; margin-top: 10px;"><span>{{ news.addtime }}</span></div>
                <div v-html="news.content_en"></div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getNews } from '@/requests/index';


const router = useRouter();
const route = useRoute();
const news = ref({
    title: "",
    title_en: "",
    cover: "",
    content: "",
    content_en: "",
    addtime: ""
});
const queryParam = ref(route.query.id || '');


watch(() => route.query.id, (newId, oldId) => {
    queryParam.value = newId;
    getSingleNews(newId);
});


const getSingleNews = async (id) => {
    const res = await getNews({ "id": id });
    if (res.status === 2000) {
        news.value = res.data;
    } else {
        console.log(res.msg);
    }
}
getSingleNews(queryParam.value);
</script>